<template>
    <p>混合式api</p>
    <p>count : {{ count }}</p>
    <p>test : {{ test }}</p>
    <p>react=====================</p>
    <p>obj: {{ obj }}</p>
    <p>obj的名字是: {{ obj.name }}</p>
    <p>obj的年龄是: {{ obj.age }}</p>

    <p>computed ==========</p>
    <p>countAddFive: {{ countAddFive }}</p>
    <p>objAgeAddFive: {{ objAgeAddFive }}</p>

    <button @click="countAddOne">count+1</button>
    <button @click="countAddTwo">count+2</button>
    <button @click="updateObj">更新obj</button>
</template>


<script setup>

// 1. 引入对应的api
import {ref,reactive,computed,watch} from 'vue'
// 2. 声明数据

const count = ref(0)
const test = ref('hello world')

const obj = reactive(
    {
        name:'tom',
        age:12
    }
)
const countAddFive = computed(
    () => {
        return count.value + 5
    }
)

const objAgeAddFive = computed(
    ()=>{
        return obj.age+5
    }
)


function countAddOne() {
    count.value++
}

function countAddTwo() {
    count.value +=2
}

function updateObj() {
    updateObjName()
}

function updateObjName() {
    obj.name = 'jerry'
}


watch(count, (newVal, oldVal)=>{
    console.log('newVal', newVal);
    console.log('oldVal', oldVal);
})

watch(countAddFive, (newVal, oldVal)=>{
    console.log('countAddFive newVal', newVal);
    console.log('countAddFive oldVal', oldVal);
})


watch(obj, (newVal, oldVal)=>{
    console.log('obj newVal', newVal);
    console.log('obj oldVal', oldVal);
})

watch(()=> obj.name, (newVal, oldVal)=>{
    console.log('obj.name newVal', newVal);
    console.log('obj.name oldVal', oldVal);
})


// 3. 使用

// alert(count.value)
console.log('obj-=======',obj)

console.log('obj的名字', obj.name);

</script>

<style scoped>

</style>